<template>
  <!--  我的发票-->
  <div>
    <div>
      <el-row style="background: white">
        <el-col :span="24"><div class="tbUpDiv"><img src="src/public/imgs/36)0DHOK%25J39%25~%25H9%5DTFO%60I.png" class="tbImg"><span class="tbUpPost">费用标椎

           <span class="tjj-1">
<!--             <el-button color="#626aef" :dark="isDark"  >手动添加</el-button>-->

             <router-link to='/invoicetjjt'>
<!-- <el-button color="#626aef" :dark="isDark" >新增标准</el-button>-->
</router-link>
           </span>







        </span></div></el-col>





      </el-row>

      <el-row>
        <el-col>
          <div class="tbScenDiv">
            <div style="display: flex;width: 900px;flex-direction: row;justify-content: space-between;">



              <div class="tbScenCdiv">
                <span>费用类型：</span>
                <span class="Display_Search_Dept">

              <el-cascader  :options="options" ref="abc" @change="getLabel" v-model="d.invoiceNumberSelect" >
                <template #default="{ node, data }" >
                  <span>{{ data.label }}</span>
                  <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                </template>
              </el-cascader>
            </span>
              </div>
              <div>
              <span class="Display_Search_Button">
              <el-button @click="search" style="margin-bottom: 10px">
                <el-icon><Search /></el-icon>
              </el-button>
            </span>
              </div>

            </div>

          </div>



        </el-col>
      </el-row>






      <el-tabs type="border-card" v-model="activeName"


               class="demo-tabs">

        <el-tab-pane label="全部" name="all" >
          <div class="picture" data-v-309cad06="">

            <div class="typeface" data-v-309cad06="">
              <el-row>
                <el-col>
                  <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="invoiceId" label="类型编号" width="100"/>
                    <el-table-column prop="invoiceType" label="单日最多消费" width="180" />
                    <el-table-column prop="invoiceOpendate" label="单月最多消费" width="280" />
                    <el-table-column prop="invoiceNumber" label="费用类型" width="180" />
                    <el-table-column prop="invoiceSeller" label="申请部门" width="180" />


                  </el-table>
                </el-col>
              </el-row>
              <el-row justify="center">
                <el-col>
                  <el-pagination
                      v-model:currentPage="pageNo"
                      v-model:page-size="pageSize"
                      :page-sizes="[5,10, 20, 30, 40]"
                      small="small"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="total"
                      @size-change="sizeChange"
                      @current-change="currentChange"/>
                </el-col>
              </el-row>
            </div></div>

        </el-tab-pane>

      </el-tabs>

    </div>
  </div>
</template>

<script  lang="ts" setup>


import {ref, reactive, toRefs, onBeforeMount, nextTick} from "vue";
import axios from "axios";

const options = [
  {
    value:'1',
    label:'全部',
  },
  {
    value:'2',
    label:'差旅费',
  },
  {
    value:'3',
    label:'交通费',
  },
  {
    value:'4',
    label:'办公费',
  },
  {
    value:'5',
    label:'培训费',
  },
  {
    value:'6',
    label:'运营费',
  },

]

const getList =()=>{

  let param={


    invoiceNumber:d.invoiceNumber,

  }


}
const search = (val) => {
  getList();
}

const getLabel = (val) => {
  let  invoiceNumberSelect=d.invoiceNumberSelect;
  if (invoiceNumberSelect=="1"){
    d.invoiceNumber='全部';
  }else  if (invoiceNumberSelect=="2")
  {
    d.invoiceNumber='差旅费';
  }
  else  if (invoiceNumberSelect=="3")
  {
    d.invoiceNumber='交通费';
  }
  else  if (invoiceNumberSelect=="4")
  {
    d.invoiceNumber='运营费';
  }
  // getList();
}

const souForm=reactive({
  personnelTime:'',
  personnelTypet:'',

})
const hidddiv=ref(false)
const d = reactive({
  //总记录
  total:1,
  //页码
  pageNo:1,
  //页大小
  pageSize:5,
  //数据
  simdate:[],

  simdatet:[],

  simdates:[],


});




const {total,pageNo,pageSize} = toRefs(d);

// 默认点击进来就是全部页面
const activeName = ref('all')

/**
 * 查询发票会议记录
 */

const tableData = [
  {
    invoiceId: '1',
    invoiceType:'10000',
    invoiceOpendate:'60000',
    invoiceNumber:'差旅费',
    invoiceSeller: '财务',

  },
  {
    invoiceId: '2',
    invoiceType:'10000',
    invoiceOpendate:'80000',
    invoiceNumber:'交通费',
    invoiceSeller: '财务',
  },
  {
    invoiceId: '3',
    invoiceType:'10000',
    invoiceOpendate:'70000',
    invoiceNumber:'办公费',
    invoiceSeller: '财务',
  },
  {
    invoiceId: '4',
    invoiceType:'10000',
    invoiceOpendate:'90000',
    invoiceNumber:'培训费',
    invoiceSeller: '财务',
  },
  {
    invoiceId: '5',
    invoiceType:'10000',
    invoiceOpendate:'90000',
    invoiceNumber:'运营费',
    invoiceSeller: '财务',
  },

]



onBeforeMount(async ()=>{
  nextTick(()=>{
    getList();
  })
})



</script>

<style scoped>
.tbUpDiv{
  width: 100%;
  border-top: 1px solid gainsboro;
  border-bottom: 1px solid gainsboro;
  position: relative;

}
.Display_Search_Button{
  position: absolute;
  left: 300px;

}
.tbImg{
  margin-left: 30px;
  margin-top: 15px;
}
.tbUpPost{
  position: relative;
  top: -19px;
  left: 20px;
}
.tbScenDiv{
  border-bottom: 1px solid gainsboro;
  /*position: relative;*/
  display: flex;
  justify-content: space-between;
}
.tbScenAdiv{
  /*width: 200px;*/
  /*margin-top: 10px;*/
  /*margin-left: 30px;*/
  font-size: 14px;
}
.tjj{
  position:relative;
  left:40px;
}
.tjj-1{
  margin: 0px 10px;
  position: relative;
  left: 820px;
}
.tbScenBdiv{
  position: relative;
  left: 80px;
  /*top: -34px;*/
  font-size: 14px;
  /*width: 400px;*/
}
.tbScenCdiv{
  /*position: relative;*/
  /*left: 400px;*/
  /*top: -69px;*/
  font-size: 14px;
  /*width: 400px;*/
}
.tbScenDdiv{
  /*position: relative;*/
  /*left: 660px;*/
  /*top: -98px;*/
  font-size: 14px;
  /*width: 400px;*/

}
.tbScenAipt{
  width: 150px;
  height: 30px;
  border: 1px solid gainsboro;
  position: relative;
  left: -400px;
}
.tbScenBipt{
  /*width: 150px;*/
  /*height: 30px;*/

}

</style>